<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <header th:replace="inc/header"></header>

  <body th:with="menu='dorm'">
    <nav th:replace="inc/nav"></nav>
    <style>
    /* #areaname option{
      position: absolute;
    } */
    </style>
    <div class="container-fluid">
      <div class="row">
        <div th:replace="inc/sidebar"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">
            监室管理
            <div class="pull-right">
              <a class="btn btn-primary btn-sm" id="btnAdd">新增</a>
            </div>
          </h1>
          <table class="table table-striped">
            <thead>
              <tr>
                <th>监区名称</th>
                <th>监室号</th>
                <th>监室名称</th>
                <th>监室类型</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr th:each="dorm : ${dorms}">
                <td th:text="${dorm.areaname}"></td>
                <td th:text="${dorm.dormcode}"></td>
                <td th:text="${dorm.dormname}"></td>
                <!-- <td th:text="${dorm.dormtype}"></td> -->
                <!-- 类型（0,普通监室1,女监室2,重点监室3,未成年监室4,已决监室5,过渡监室6,未决监室7,病犯监室8,外籍监室9,严管监室，10，单人监室11监区12监区公共区13禁闭室14家属会见室15律师会见室16提讯室） -->
                <td th:if="${dorm.dormtype}==0" th:text="普通监室"></td>
                <td th:if="${dorm.dormtype}==1" th:text="女监室"></td>
                <td th:if="${dorm.dormtype}==2" th:text="重点监室"></td>
                <td th:if="${dorm.dormtype}==3" th:text="未成年监室"></td>
                <td th:if="${dorm.dormtype}==4" th:text="已决监室"></td>
                <td th:if="${dorm.dormtype}==5" th:text="过渡监室"></td>
                <td th:if="${dorm.dormtype}==6" th:text="未决监室"></td>
                <td th:if="${dorm.dormtype}==7" th:text="病犯监室"></td>
                <td th:if="${dorm.dormtype}==8" th:text="外籍监室"></td>
                <td th:if="${dorm.dormtype}==9" th:text="严管监室"></td>
                <td th:if="${dorm.dormtype}==10" th:text="单人监室"></td>
                <td th:if="${dorm.dormtype}==11" th:text="监区"></td>
                <td th:if="${dorm.dormtype}==12" th:text="监区公共区"></td>
                <td th:if="${dorm.dormtype}==13" th:text="禁闭室"></td>
                <td th:if="${dorm.dormtype}==14" th:text="家属会见室"></td>
                <td th:if="${dorm.dormtype}==15" th:text="律师会见室"></td>
                <td th:if="${dorm.dormtype}==16" th:text="提讯室"></td>
                <td>
                  <a
                    class="btn btn-xs btn-primary btnEdit"
                    th:attr="data-id=${dorm.id}"
                    >修改</a
                  >
                  <a
                    class="btn btn-xs btn-danger btnDelete"
                    th:attr="data-id=${dorm.id}"
                    >删除</a
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div
      class="modal fade"
      id="modalSave"
      tabindex="-1"
      role="dialog"
      data-backdrop="static"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="modalTitle">新增监室</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" id="formSave">
              <input
                type="hidden"
                name="jsbh"
                id="jsbh"
                th:attr="value=${jsbh}"
              />
              <input type="hidden" name="id" id="id" />
              <!-- <div class="form-group">
            <label for="code" class="control-label col-md-3">监区名称</label>
            <div class="col-md-9">
              <input type="text" name="areaname" id="areaname" class="form-control" required>
            </div>
          </div> -->
              <div class="form-group">
                <label for="areaname" class="control-label col-md-3"
                  >监区名称</label
                >
                <div class="col-md-9">
                  <select
                    name="areaname"
                    id="areaname"
                    class="form-control"
                    required
                  >
                    <option value="">---请选择---</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label for="name" class="control-label col-md-3">监室号</label>
                <div class="col-md-9">
                  <input
                    type="text"
                    name="dormcode"
                    id="dormcode"
                    class="form-control"
                    required
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="name" class="control-label col-md-3"
                  >监室名称</label
                >
                <div class="col-md-9">
                  <input
                    type="text"
                    name="dormname"
                    id="dormname"
                    class="form-control"
                    required
                  />
                </div>
              </div>
              <!-- <div class="form-group">
            <label for="name" class="control-label col-md-3">监室类型</label>
            <div class="col-md-9">
              <input type="text" name="dormtype" id="dormtype" class="form-control" required>
            </div>
          </div> -->
              <div class="form-group">
                <label for="dormtype" class="control-label col-md-3"
                  >监室类型</label
                >
                <div class="col-md-9">
                  <select
                    name="dormtype"
                    id="type"
                    class="form-control"
                    required
                  >
                    <option value="">---请选择---</option>
                    <option value="0">普通监室</option>
                    <option value="1">女监室</option>
                    <option value="2">重点监室</option>
                    <option value="3">未成年监室</option>
                    <option value="4">已决监室</option>
                    <option value="5">过渡监室</option>
                    <option value="6">未决监室</option>
                    <option value="7">病犯监室</option>
                    <option value="8">外籍监室</option>
                    <option value="9">严管监室</option>
                    <option value="10">单人监室</option>
                    <option value="11">监区</option>
                    <option value="12">监区公共区</option>
                    <option value="13">禁闭室</option>
                    <option value="14">家属会见室</option>
                    <option value="15">律师会见室</option>
                    <option value="16">提讯室</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal">取消</button>
            <button class="btn btn-primary" id="btnSave">保存</button>
          </div>
        </div>
      </div>
    </div>

    <div th:replace="inc/footer"></div>
    <script th:inline="javascript">
            var $modal = $('#modalSave');
            var $modalTitle = $('#modalTitle');
            var $form = $('#formSave');

            $form.validate();
            // 获取所有监区
            $.ajax({
              url:'/dormArea/findAll',
              success:function(res){
                if(res.length>10){
                  // $('#areaname').attr('size',10);
                }
                for(var i=0;i<res.length;i++){
                  $('#areaname').append('<option value="'+res[i].areaname+'" myid="'+res[i].id+'">'+res[i].areaname+'</option>');
                }
              }
            });
            // $('#areaname').on('click',function(){
            //       $('#areaname').attr('size',10); 
            // })
            // $('#areaname').on('click','option',function(){
            //   $(this).parent().removeAttr("size");  
            //   return false;
            // })

            // 新增
            $('#btnAdd').on('click', function () {
              $modalTitle.text('新增监室');
              $modal.find('input[type=text], select').val('');
              $modal.find('input[name=id]').val('');
              $modal.modal('show');
            });

            // 保存
            $('#btnSave').on('click', function () {
              if (!$form.valid()) return;
              var data = $form.serializeDict();
              data.areacode = $("#areaname option:selected").attr('myid');
              console.log(data)
              $.ajax({
                url: [[${#httpServletRequest.getContextPath()} +'/dorm/save']],
                data: data,
                method: 'post',
                success: function () {
                  alert('保存成功');
                  window.location.reload();
                },
                error: function () {
                  alert('保存失败');
                }
              })
            });

            // 删除
            $('.btnDelete').on('click', function () {
              var id = $(this).attr('data-id');
              $.ajax({
                url: [[${#httpServletRequest.getContextPath()} +'/dorm/delete']],
                data: {
                  id: id
                },
                method: 'post',
                success: function () {
                  alert('删除成功');
                  window.location.reload();
                },
                error: function () {
                  alert('删除失败');
                }
              })
            });

            // 修改
            $('.btnEdit').on('click', function () {
              var id = $(this).attr('data-id');
              $.ajax({
                url: [[${#httpServletRequest.getContextPath()} +'/dorm/findById']],
                data: {
                  id: id
                },
                success: function (data) {
                  $form.find('input:not([type=radio]), select').each(function () {
                    $(this).val(data[$(this).attr('name')])
                  });
                  $modalTitle.text('修改监室');
                  $modal.modal('show');
                },
                error: function () {
                  alert('获取监室详情失败');
                }
              })
            })
    </script>
  </body>
</html>
